<template>
  <div class="schema">
    <ul class="schema-head">
      <li>scheme 生成器</li>
      <li>
        <el-button size="small" @click="resetSchema">重置 schema</el-button>
        <el-button size="small" @click="exportSchema">导出 schema</el-button>
      </li>
    </ul>
    <div class="schema-body">
      <schema-content></schema-content>
    </div>
    <SchemaExport ref="exportDialog"></SchemaExport>
  </div>
</template>

<script lang="ts">
import conponentConfig from "@/utils/schemaRegister.js";
import SchemaContent from "./components/SchemaContent.vue";
import SchemaExport from "./components/SchemaExport.vue";
import { defineComponent, reactive, ref, provide } from "vue";
export default defineComponent({
  components: {
    SchemaContent,
    SchemaExport,
  },
  provide() {
    return {
      content: this,
    };
  },
  setup() {
    const cmpConfig = conponentConfig.$cmpConfig;
    provide("cmpConfig", cmpConfig);
    const exportDialog = ref(null);
    let obj = {
      label: "新增组件",
      icon: "icon-zujian",
      componentList: [],
    };
    let model = reactive(obj);
    let curComponent = ref(null);
    const resetSchema = () => {
      model = { label: "新增组件", icon: "icon-zujian", componentList: [] };
      curComponent.value = null;
      console.log("重置");
    };
    const exportSchema = () => {
      (exportDialog as any).value.open();
    };
    return {
      model,
      curComponent,
      exportDialog,
      resetSchema,
      exportSchema,
    };
  },
});
</script>

<style lang="scss" scoped>
.schema {
  .schema-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: 0 20px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
    font-size: 16px;
  }
  .schema-body {
    height: calc(100vh - 60px); /*no*/
  }
}
</style>
